<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>10.bootstrap的标签徽章巨幕</title>
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                    <p class="lead text-info"><strong>标签的使用</strong></p>
                    <h4>修炼30年，可以达到：<span class="label label-success">最强王者</span></h4>
                    <h4>修炼20年，可以达到：<span class="label label-info">超凡宗师</span></h4>
                    <h4>修炼10年，可以达到：<span class="label label-danger">璀璨钻石</span></h4>
                    <h4>修炼05年，可以达到：<span class="label label-warning">荣耀黄金</span></h4>
                    <h4>修炼01年，可以达到：<span class="label label-primary">不屈白银</span></h4>
                    <h4>修炼05月，可以达到：<span class="label label-default">英勇黄铜</span></h4>
                    <h4>修炼01月，可以达到：<span class="label label-default">坚韧黑铁</span></h4>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                    <p class="lead text-danger"><strong>徽章的使用</strong></p>
                    <h4>您现在的等级：<span class="label label-info">超凡宗师<span class="badge">真的</span></span></h4>
                    <h4>您现在的等级：
                        <span class="label label-danger">璀璨钻石
                            <span class="badge badge-warning">你丫就一黑铁</span></span></h4>
                    <button class="btn btn-info">您有新消息<span class="badge badge-info">12</span></button>
                </div>
            </div>

            <!-- 巨幕展示重要的信息，jumbotron是类 -->
            <div class="jumbotron">
                <h3>我是一个巨幕！</h3>
                <p>hello world!</p>
                <p><a class="btn btn-primary btn-sm" href="#">点击了解更多</a></p>
            </div>
        </div>
        <div class="jumbotron">
            <div class="container">
                <h3>我是第二个巨幕！ 撑开了整个的页面宽度！</h3>
                <p>巨幕是一个轻量、灵活的组件，它能延伸至整个浏览器视口，来展示网站上的关键内容。</p>
                <p><a class="btn btn-primary btn-sm" href="#">点击了解更多</a></p>
            </div>
        </div>
    </body>
</html>

